<template>
  <div v-if="data">
    <div class="card">
      <text class="text1" v-if="data.spuListVos[0].reservationType==0">活动预约</text>
      <text class="text1" v-else>共享预约</text>
      <div class="row" style="align-items: start">
        <img
            :src="`${fileUrl}/${data.spuListVos[0].imageId}`"
            style="
            width: 120px;
            height: 100px;
            border-radius: 5px;
            object-fit: cover;
          "
        />
        <div style="width: 8px"></div>
        <div style="display: flex; flex-direction: column; flex-grow: 1">
          <text class="titleText" style="font-size: 12px">
            {{ data.shopName}}
            {{ data.spuListVos[0].spuName }}
<!--            {{ data.spuListVos[0].orderSkuVo.skuName }}-->
          </text>
          <div class="row" style="align-items: center" v-if="data && data.spuListVos[0].scenicSpotTimeSlots && data.spuListVos[0].scenicSpotTimeSlots[0]">
            <img src="@/views/activityPages/assets/calendar.png" class="icon"/>
<!--            <van-icon name="calendar-o" size="12" />-->
            <div style="width: 3px"></div>
            <text class="subText" style="font-size: 10px"  > {{data.spuListVos[0].reservationType==0? '活动':'营业'}}时间:
              {{
                data.spuListVos[0].scenicSpotTimeSlots[0].timeHour.join('到')
              }} {{ data.spuListVos[0].scenicSpotTimeSlots[0].timeSlot.join(',') }}
            </text>
          </div>
          <div class="row" style="align-items: center">
            <img
                src="@/views/activityPages/assets/arcoDesign-location.png"
                class="icon"
            />
<!--            <van-icon name="location-o" size="12" />-->
            <div style="width: 3px"></div>
            <text class="subText" style="font-size: 10px"
            >{{data.spuListVos[0].reservationType==0? '活动':'门店'}}地址: {{ data.spuListVos[0].address }}
            </text
            >
          </div>
          <div class="subText" style="font-size: 10px" v-if="data.startTime">预约时间：{{data.startTime}}-{{data.endTime}}</div>
          <div class="subText" style="font-size: 10px" v-else-if="data.timeRanges?.length">预约时间：{{data.timeRanges.join(',')}}</div>
          <div class="subText" style="font-size: 10px" v-if="data.spuListVos[0].billingMethod">预约类型：{{billTypeEnum[data.spuListVos[0].billingMethod]}}</div>
          <div class="row">
            <MoneyCard
                :price="data.spuListVos[0].orderSkuVo.price"
                :coins="0"
            ></MoneyCard>
            <div style="flex-grow: 1"></div>
            <text>x{{ data.spuListVos[0].orderSkuVo.buyCount }}</text>
          </div>
<!--          <div class="row" style="align-items: end;padding-top: 5px">-->
<!--            <text>到手价-->
<!--            </text-->
<!--            >-->
<!--            <MoneyCard-->
<!--                :price="data.actualPrice"-->
<!--                :coins="0"-->
<!--                style="scale: 0.8"-->
<!--            ></MoneyCard>-->
<!--          </div>-->
        </div>
      </div>
    </div>

    <!-- <div class="card">
            <text>订单联系人</text>
            <div style="height: 10px"></div>

            <div class="row" style="width: 100%">
                <text class="text2">姓名:吴叨叨</text>
                <div style="flex-grow: 1"></div>
                <text class="text2">111111111</text>
            </div>
        </div> -->
    <OrderContact
        style="margin-top: 10px"
        v-if = data.linkPhone
        :data="{ linkPhone: data.linkPhone, name: data.name }"
    ></OrderContact>
    <div style="height: 10px"></div>
    <div class="card">
      <text>订单编号: {{ data.orderNumber }}</text>
      <div style="height: 5px"></div>

      <text>下单时间: {{ data.createTime }}</text>
      <div style="height: 5px"></div>

      <div v-if="data.payWay">
        <!-- 支付方式 0-网银 1-微信 2-支付宝 -->
        <text>支付方式: {{ payWayEnum[data.payWay] }}</text>
        <div style="height: 5px"></div>
      </div>

      <div v-if="data.payTime">
        <text>支付时间: {{ data.payTime }}</text>
        <div style="height: 5px"></div>
      </div>

      <text>配送方式: 虚拟商品</text>

      <div class="QRBanner-swipe" style="margin-top: 10px">
        <QRBanner
            :is-coupon="true"
            :data="data"
            v-if="[4,5].indexOf(data.status)===-1 &&  data.orderTicketVos?.length"
            class="qr_banner_components"
        />
      </div>
    </div>
    <div style="height: 10px"></div>
    <!-- <div class="card">
            <div class="row row1">
                <text>商品总金额</text> <MoneyCard :price="1000" :coins="1000"></MoneyCard>
            </div>
            <div class="row row1">
                <text>优惠券</text>
                <text style="font-size: 12px; color: rgba(236, 94, 65, 1)">满100-10</text>
            </div>
            <div class="row row1">
                <text>实际支付</text> <MoneyCard :price="1000" :coins="1000"></MoneyCard>
            </div>
        </div> -->
    <OrderMoney :data="data"></OrderMoney>
  </div>
</template>

<script setup lang="ts">
import OrderContact from '@/views/activityPages/components/order-contact.vue';
import OrderMoney from '@/views/activityPages/components/order-money.vue';
import MoneyCard from '@/views/activityPages/components/money-card.vue';
import {payWayEnum} from '../const/payway';
import {billTypeEnum} from "../const/billType.ts";
import QRBanner from "@/views/order-detail/components/QRBanner.vue";
import {orderStatusEnum} from "@/views/activityPages/const/orderStatus.ts";

const props = defineProps(['data']);
const fileUrl = import.meta.env.VITE_FILE_URL

</script>

<style scoped>
@import url('@/views/activityPages/style/card.css');

.text1 {
  color: rgba(102, 102, 102, 1);
  font-size: 14px;
  text-align: left;
  font-family: PingFangSC-regular;
  font-weight: bold;
  padding-bottom: 5px;
}

.text2 {
  line-height: 14px;
  color: rgba(153, 153, 153, 1);
  font-size: 10px;
  text-align: left;
  font-family: PingFangSC-regular;
}

.row1 {
  justify-content: space-between;
  padding-bottom: 10px;
  width: 100%;
}

.QRBanner-swipe{
  width: 100%;
}
</style>
